<template>
  <p v-fontSize="fontSize">DirectiveComponent组件</p>
  <button @click= " fontSize = '24px' ">更改字号大小</button>
</template>

<script setup>
import { ref } from 'vue'
let fontSize = ref('12px')

// const vFontSize = {
//   mounted: (el, binding)=> {
//      el.style.fontSize = binding.value;
//   },

//   updated: (el,binding)=>{
//     el.style.fontSize=binding.value;
//   },

// }
// const vFontSize = {
//   mounted: (el, binding) => {
//     console.log('mounted:')
//     console.log('binding value is:' + binding.value)
//     // binding.value = '18px'
//     // el.style.fontSize = binding.value
//     el.style.fontSize = '18px'
//     console.log('binding value is:' + binding.value)
//   },
//   updated: (el, binding) => {
//     el.style.fontSize = binding.value
//     console.log('updated')
//     console.log('binding oldValue is:' + binding.oldValue)
//     console.log('binding value is:' + binding.value)
//   },
// }

//函数形式
// const vFontSize = (el, binding) => {
//   console.log('默认字号：' + document.querySelector('p').style.fontSize)
//   el.style.fontSize = binding.value
//   console.log(document.querySelector('p').style.fontSize)
// }
</script>
 